<template>
  <div>
    <div class="headerbox">
      <div class="headerContainer">
        <div class="left">
          <router-link to="/">
            <img
              src="../../assets/logo.png"
              width="40"
              height="40"
              class="logo"
            />
            <div class="title">航盛应用市场</div></router-link
          >
        </div>
        <div class="center">
          <div class="textBox">
            <router-link
              to="/"
              :class="activeClass == 1 ? 'textClicked' : 'text'"
              >首页</router-link
            >
          </div>
          <div class="textBox">
            <router-link
              to="/Apps"
              :class="activeClass == 2 ? 'textClicked' : 'text'"
              >应用</router-link
            >
          </div>
          <div class="textBox">
            <router-link
              to="/Top"
              :class="activeClass == 3 ? 'textClicked' : 'text'"
              >排行</router-link
            >
          </div>
          <div class="textBox">
            <a
              href="https://ucdev.yzhsae.com:9604/open-platform/"
              class="text"
              target="_blank"
              >开发者</a
            >
          </div>
        </div>
        <div class="right">
          <div class="search">
            <i class="search-icon"></i>
            <input
              maxlength="50"
              type="text"
              placeholder="搜索应用"
              v-model="KeyWord"
              @keyup.enter="ssk"
            />
            <a
              class="clearKeyword"
              v-show="KeyWord"
              @click="clearSearchInput"
            ></a>
          </div>
          <div class="drop-down">
            <a href="javascript:;" @click="jlogin()" v-if="!user">
              <img src="../../assets/ic_avatar.svg" class="userIcon"
            /></a>

            <a
              href="https://ucdev.yzhsae.com:9604/open-platform/profile"
              v-if="user"
            >
              <img :src="user.imgUrl" class="userIcon"
            /></a>

            <div class="dropdown-menu" v-if="user">
              <a
                class="name"
                href="https://ucdev.yzhsae.com:9604/open-platform/profile"
                >{{ user.nickname }}</a
              >
              <a class="logout" href="javascript:;" @click="tc()">退出</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="clear"></div>
    <iframe
      id="bbb-iframe"
      :src="at"
      style="position:fixed; top:0;left:0;z-index:99999;width:100%; height:100%; background:#ffffff"
      v-if="xslogin"
    ></iframe>

    <div class="tcc" v-if="tcxs">
      <div class="tccbj" @click="bxx()"></div>
      <div class="tccb">
        <span>请您登录后在操作</span>
        <p>
          <span class="bt1" @click="bxx()">取消</span
          ><span class="bt2" @click="jlogin()">登录</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      KeyWord: "",
      user: "",

      xslogin: false,
      at:
        "https://ucdev.yzhsae.com:9604/open-platform/login?callback=" +
        window.location.href
    };
  },
  props: ["activeClass", "tcxs"],

  mounted() {
    if (localStorage.getItem("user")) {
      this.user = localStorage.getItem("user");
    }
    console.log("user：", this.user);
    this.xslogin = false;

    // document.cookie = `user={ "id": "0f83787f-2c54-4e15-b63b-274e73f0bd0d", "username": "user_0f83787f", "nickname": "金雷", "imgUrl": "http://hsae-smartassistants.oss-cn-shanghai.aliyuncs.com/1582441345630.jpg", "sex": "UNKNOWN", "telephone": "15995131432", "roles": ["文档管理"], "jobNum": "1701015", "hsaeStaff": true, "approveType": 2, "approveStatus": 0, "globalToken": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHQiOjE2MjQ4NzIyMjIyNzgsInVpZCI6IjBmODM3ODdmLTJjNTQtNGUxNS1iNjNiLTI3NGU3M2YwYmQwZCIsImlhdCI6MTYxNzA5NjIyMjI3OH0.XUyCSu876ZhV8KnVUxUDEklLvjwnNGJpgxfigme4UZY", "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHQiOjE2MTcyMzk4ODQxMTksImhzYWVTdGFmZiI6dHJ1ZSwiam9iTnVtIjoiMTcwMTAxNSIsImFwcElkIjoiNTQ1Y2E1YmQtZThlMS00MmRmLTg1NzctMzFjODc4OTdmZTg5IiwidHlwZSI6IldFQiIsImlhdCI6MTYxNzE1MzQ4NDExOSwiZGV2aWNlSWQiOm51bGwsInRva2VuIjoiZXlKMGVYQWlPaUpLVjFRaUxDSmhiR2NpT2lKSVV6STFOaUo5LmV5SmxlSFFpT2pFMk1qUTROekl5TWpJeU56Z3NJblZwWkNJNklqQm1PRE0zT0RkbUxUSmpOVFF0TkdVeE5TMWlOak5pTFRJM05HVTNNMll3WW1Rd1pDSXNJbWxoZENJNk1UWXhOekE1TmpJeU1qSTNPSDAuWFV5Q1N1ODc2WmhWOEtuVlV4VURFa2xMdmp3bk5HSnBneGZpZ21lNFVaWSJ9.eoq-Vks1xrB7cz6CPWy8znqRaR0ooZwLbjvm-rzP5OQ", "refreshToken": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHQiOjE2MTk3NDU0ODQxMTksImhzYWVTdGFmZiI6dHJ1ZSwiam9iTnVtIjoiMTcwMTAxNSIsImFwcElkIjoiNTQ1Y2E1YmQtZThlMS00MmRmLTg1NzctMzFjODc4OTdmZTg5IiwidHlwZSI6IldFQiIsImlhdCI6MTYxNzE1MzQ4NDExOSwiZGV2aWNlSWQiOm51bGwsInRva2VuIjoiZXlKMGVYQWlPaUpLVjFRaUxDSmhiR2NpT2lKSVV6STFOaUo5LmV5SmxlSFFpT2pFMk1qUTROekl5TWpJeU56Z3NJblZwWkNJNklqQm1PRE0zT0RkbUxUSmpOVFF0TkdVeE5TMWlOak5pTFRJM05HVTNNMll3WW1Rd1pDSXNJbWxoZENJNk1UWXhOekE1TmpJeU1qSTNPSDAuWFV5Q1N1ODc2WmhWOEtuVlV4VURFa2xMdmp3bk5HSnBneGZpZ21lNFVaWSJ9.6iokcd9l1BxjByeKkJEkigy5S7spJP2tjjIHsn2RADg", "expireTime": 1617239884119 };`;
    if (this.getCookie("user")) {
      this.user = JSON.parse(this.getCookie("user"));
    }

    console.log(this.user);
    console.log(this.user.id);
  },
  methods: {
    parentFn(payload) {
      console.log(2222);

      this.tcxs = payload;
    },
    change(data) {
      this.tcxs = data;
    },

    bxx() {
      this.tcxs = false;
      this.$emit("childByValue", this.tcxs);
    },
    jlogin() {
      // this.xslogin = true;
      var ta = window.location.href;
      localStorage.setItem("preurl", ta);

      window.location.href =
        "https://ucdev.yzhsae.com:9604/open-platform/login?callback=" + ta;
    },
    tc() {
      console.log(12323);

      this.delCookie("user");
      this.user = "";
      localStorage.removeItem("user");
    },

    clearSearchInput() {
      this.KeyWord = "";
    },
    ssk() {
      console.log("header:", this.KeyWord);
      this.$router.push({
        path: "/search",
        query: { KeyWord: this.KeyWord }
      });
    }
  }
};
</script>

<style scoped>
.header {
  background: black;
  color: gainsboro;
}
.tcc {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
.tccbj {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 9;
}

.tccb {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 440px;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 8px 0 rgb(0 0 0 / 20%);
  box-shadow: 0 2px 8px 0 rgb(0 0 0 / 20%);
  border-radius: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 35px;
  height: 200px;
}
.tccb span {
  font-size: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 80px;
}

.tccb p {
  width: 100%;
  text-align: center;
}
.tccb p span {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  border-radius: 20px;
  padding: 12px 23px;
}
.tccb .bt1 {
  max-width: 182px;
  min-width: 128px;
  width: auto;
  height: 36px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  background-color: rgb(242, 242, 242);
  color: rgb(0, 125, 255);
  border: none;
  margin: 0px 11px;
}
.tccb .bt2 {
  max-width: 182px;
  min-width: 128px;
  width: auto;
  height: 36px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  background-color: rgb(0, 125, 255);
  color: rgb(255, 255, 255);
  border: none;
  margin: 0px 11px;
}
</style>
